<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        img {
            display: block;
        }

        a {
            text-decoration: none;
            color: aquamarine;
        }

        h1,
        h2,
        h3 {
            font-size: 16px;
        }

        .l {
            float: left;
        }

        .r {
            float: right;
        }

        .clear {
            content: "";
            display: block;
            clear: both;
        }

        #main {
            width: 366px;
            margin: 20px auto;
        }

        #main .tit {
            height: 23px;
            line-height: 23px;
            font-size: 12px;
            font-weight: bold;
            padding-left: 30x;
            background-color: aquamarine;
        }
        #main .pic{
            width: 221px;
            height: 142px;
            border: 1px solid hotpink;
        }
        #main .pic img{
            margin: 20px;
        }
        #main .context{
            width: 40px;

        }
        #main ul{

        }
        #main li{
            margin-bottom: 22px;

        }
    </style>
</head>

<body>
    <div id="main">
        <h2 class="tit">外媒评论精选</h2>
        <ul>
            <li class="clear">
                <div class="l pic">
                    <a href="#">
                        <img src="./img/1.PNG" alt="">
                    </a>
                </div> 
                <div class="l context">
                    <h2>标题</h2>
                    <p>
                        段落
                        <a href="#"></a>
                    </p>
                </div>
            </li>
            <li class="clear">
                <div class="l pic">
                    <a href="#">
                        <img src="./img/2.PNG" alt="">
                    </a>
                </div>
                <div class="l context">
                    <h2>标题</h2>
                    <p>
                        段落
                        <a href="#"></a>
                    </p>
                </div>
            </li>

        </ul>
    </div>

</body>

</html>